﻿@charset 'utf-8';
html,
body {
    height: 100%;
}

.aside_nav_bar {
    position: fixed;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    left: 0px;
    top: 0px;
    z-index: 99;
    width: 210px;
    height: 100%;
    background: #fff;
    -webkit-box-shadow: 5px 0px 6px 4px #eaeaea;
    -moz-box-shadow: 5px 0px 6px 4px #eaeaea;
    -ms-box-shadow: 5px 0px 6px 4px #eaeaea;
    box-shadow: 5px 0px 6px 4px #eaeaea;
}


/* 头像 */

.aside_nav_bar .avatar_box {
    padding-top: 90px;
    border-bottom: 1px solid #f1f1f1;
    margin: 0 20px;
    text-align: center;
}

.aside_nav_bar .avatar_box .avatar {
    position: relative;
    width: 60px;
    height: 60px;
    margin: auto;
    overflow: hidden;
    border-radius: 50%;
}

.aside_nav_bar .avatar_box .avatar .ava_box {
    position: relative;
    text-align: center;
}

.aside_nav_bar .avatar_box .avatar .ava_box img {
    width: 60px;
    height: 60px;
}

.aside_nav_bar .avatar_box .name {
    margin: 10px 0 30px;
    color: #4d4d4d;
    font-size: 14px;
}


/* 导航列表 */

.aside_nav_bar .nav_items {
    margin-top: 15px;
    color: #333;
    font-size: 16px;
}

.aside_nav_bar .nav_items .item {
    cursor: pointer;
    /*-webkit-transition: background 0.2s;
    -moz-transition: background 0.2s;
    -ms-transition: background 0.2s;
    -o-transition: background 0.2s;*/
    transition: background 0.2s;
    color: #a3a3a3;
}
.aside_nav_bar .nav_items .item:hover{
    color: #3a3a3a
}
.aside_nav_bar .nav_items .item.home {
    color: #a3a3a3
}

.aside_nav_bar .nav_items .item.active {
    background: #f1f1f1;
}

.aside_nav_bar .nav_items .item.active, .aside_nav_bar .nav_items .item.active .tit {
    color: #3a3a3a
}

.aside_nav_bar .nav_items .item.active .brand .icon {
    background-position: -252px -180px;
}

.aside_nav_bar .nav_items .item .tit {
    position: relative;
    height: 48px;
    line-height: 48px;
    padding-left: 70px;
    display: block;
    color: #a3a3a3;
}
.aside_nav_bar .nav_items .item .tit:hover{
    color: #3a3a3a
}
.aside_nav_bar .nav_items .item .tit span.arrow {
    position: absolute;
    top: 16px;
    right: 30px;
    width: 8px;
    height: 15px;
     background: url('../img/icons.png') no-repeat -216px -94px;
    /*-webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;*/
    transition: all 0.2s;
    opacity: .3;
}
.aside_nav_bar .nav_items .item:hover span.arrow {

    transform: rotate(90deg);
    opacity: 1;

    
}
.aside_nav_bar .nav_items .item .icon {
    position: absolute;
    left: 27px;
    top: 14px;
    width: 25px;
    height: 24px;
    background: url('../img/icons.png') no-repeat 0px -1px;
}
.aside_nav_bar .nav_items .item.home:hover .icon {
    background-position: -0px -181px;
}

.aside_nav_bar .nav_items .item .shop .icon {
    background-position: -39px 0;
}
.aside_nav_bar .nav_items .item .shop:hover .icon {
    background-position: -39px -180px;
}
.aside_nav_bar .nav_items .item .position .icon {
    width: 26px;
    background-position: -80px 0;
}
.aside_nav_bar .nav_items .item .position:hover .icon {
    width: 26px;
    background-position: -80px -180px;
}
.aside_nav_bar .nav_items .item .resume .icon {
    height: 25px;
    background-position: -121px 0;
}
.aside_nav_bar .nav_items .item .resume:hover .icon {
    height: 25px;
    background-position: -121px -180px;
}

.aside_nav_bar .nav_items .item .message .icon {
    background-position: -158px 0;
}
.aside_nav_bar .nav_items .item .message:hover .icon {
    background-position: -158px -180px;
}
.aside_nav_bar .nav_items .item .message {
    position: relative
}

.aside_nav_bar .nav_items .item .message .msg {
    position: absolute;
    width: 8px;
    height: 8px;
    top: 8px;
    left: 130px;
    background: #f00;
    border-radius:8px ;
    -webkit-border-radius:8px ;
    -moz-border-radius:8px ;
    -ms-border-radius:8px ;
    -o-border-radius:8px ;
}


.aside_nav_bar .nav_items .item .message .msg .close {
    display: inline-block;
    width: 45px;
    height: 45px;
    position: absolute;
    left: 116px;
    top: 0px;
}
.aside_nav_bar .nav_items .item .set .icon {
    background-position: -180px -144px;
}
.aside_nav_bar .nav_items .item .set:hover .icon {
    background-position: -180px -180px;
}
.aside_nav_bar .nav_items .item .set {
    position: relative
}



/* 菜单-子菜单 */

.aside_nav_bar .nav_items .item ul {
    background: #f1f1f1;
    color: #333;
    height: 0;
    overflow: hidden;
}

.aside_nav_bar .nav_items .item.active ul {
    height: auto;
}

.aside_nav_bar .nav_items .item ul li {
    height: 36px;
    line-height: 36px;
}

.aside_nav_bar .nav_items .item ul li a {
    display: block;
    padding-left: 70px;
    color: #a3a3a3;
    text-decoration: none;
    transition: color 0.2s;
}

.aside_nav_bar .nav_items .item ul li.current a {
    color: #333;
}

.aside_nav_bar .nav_items .item ul li:hover a {
    color: #333;
}
.aside_nav_bar .nav_items .item .brand .icon {
    background-position: -252px -144px;
}
.aside_nav_bar .nav_items .item .brand:hover .icon {
    background-position: -252px -180px;
}
.aside_nav_bar .nav_items .item .brand {
    position: relative
}
.aside_nav_bar .nav_items .item .brand .icon{
     width: 26px;
     height: 26px;
}
.aside_nav_bar .nav_items .item .account .icon {
    background-position: -216px -144px;
}
.aside_nav_bar .nav_items .item .account:hover .icon {
    background-position: -216px -180px;
}
.aside_nav_bar .nav_items .item .account {
    position: relative
}